<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/classification.css">
    <link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
</head>

<body>
    <header>
        <div class="container head">
            <div class="logo">
                <img src="../images/header/logo.png" alt="">
            </div>
            <div class="header_btn">
                <ul>
                    <li><a href="../index.html"> 首页 </a></li>
                    <li>|</li>
                    <li><a href="../page/location.html"> 旅游城市 </a></li>
                    <li>|</li>
                    <li><a href="../page/classification.html"> 各色美景 </a></li>
                    <li>|</li>
                    <li><a href="../page/header.html"> 打卡胜地 </a></li>
                    <li>|</li>
                    <li><a href="https://www.amap.com/" target="_blank"> 高德导航 </a></li>
                </ul>
            </div>
            <div class="header_icon">
                <ul>
                    <li><a href="" class="fa fa-qq"></a></li>
                    <li>|</li>
                    <li><a href="" class="fa fa-weixin"></a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="lunbo fixclear">
        <div class="container fixclear">
            <div class="box fixclear">
                <img src="../images/classification/timg.jpg" alt="">
                <img src="../images/classification/timg (1).jpg" alt="">
                <img src="../images/classification/timg (2).jpg" alt="">
            </div>
        </div>
    </div>
    <div class="container menu_header">
        <div class="menu">
            <select id="first" onchange="setSecond(this.value)">
                <option value="1">无</option>
                <option value="2">历史古迹</option>
                <option value="3">自然美景</option>
                <option value="4">科技炫酷</option>
            </select>
            <select id="first" onchange="setSecond(this.value)">
                <option value="1">无</option>
                <option value="2">1~2人</option>
                <option value="3">3~4人</option>
                <option value="3">4人以上</option>
            </select>
            <select id="first" onchange="setSecond(this.value)">
                <option value="1">无</option>
                <option value="2">A级景区</option>
                <option value="3">4A级景区</option>
                <option value="3">5A级景区</option>
                <option value="3">红色经典景区</option>
            </select>
        </div>
    </div>
    <div class="container box1">
        <button>筛选</button>
        <div class="strip"></div>
        <div class="indicator"> 经典旅游区推荐</div>
    </div>
    <div class="recommend container">
        <div class="recommend_list col-xs-12 col-sm-6 col-md-4 col-lg-4 xiugai1">
            <img src="../images/classification/1.jpg" alt="">
            <div>
                <h2>历史古迹</h2>
                <p class="tiaozheng">历史古迹类旅游景区主要指古代时期就已经存在，却未因时间原因消逝，至今仍然存在的典型遗迹，具有一定的文化价值或历史价值的文物古迹为主的景区。文化古迹类景区是人们学习历史、了解历史以及教育当代人的良好场所。
                </p>
                <div class="button">
                    <button class="left_button">北京故宫</button>
                    <button>长城</button>
                    <button class="right_button">颐和园</button>
                </div>
            </div>
        </div>
        <div class="recommend_list col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <img src="../images/classification/2.jpg" alt="">
            <div>
                <h2>自然美景</h2>
                <p class="tiaozheng">
                    <br>
                    自然美景类旅游景区是指具有独特的风光、景物以及古迹，同时也包括有独特的人文习俗的景区。风景名胜是人们休闲、学习、放松心情的好去处。
                    <br>
                    <br>
                </p>
                <div class="button">
                    <button class="left_button">北岳恒山</button>
                    <button>峨嵋山</button>
                    <button class="right_button">青城山</button>
                </div>
            </div>
        </div>
        <div class="recommend_list col-xs-12 col-sm-6 col-md-4 col-lg-4 xiugai">
            <img src="../images/classification/3.jpg" alt="">
            <div>
                <h2>科技炫酷</h2>
                <p class="tiaozheng">
                    <br> 科技炫酷是建筑与设施。亚类是综合人文旅游地。基本类型是教学科研实验场所、文化活动场所。如果是军事类的科技馆基本类型也可以是军事观光地。
                    <br><br>
                </p>
                <div class="button">
                    <button class="left_button">西昌卫星</button>
                    <button>科技馆</button>
                    <button class="right_button">航天馆</button>
                </div>
            </div>
        </div>
        <div class="container box1">
            <div class="strip"></div>
            <div class="indicator"> 人数推荐</div>
        </div>
        <div class="recommend_list col-xs-12 col-sm-6 col-md-4 col-lg-4 xiugai1">
            <img src="../images/classification/4.jpg" alt="">
            <div>
                <h2>1~2人推荐</h2>
                <p class="tiaozheng">
                    为了远方未知的风景，为了见识更多的人和事，我们选择了独自远行独自旅行的路上，邂逅不一样的风景，遇见更好的自己。
                    <br><br>
                </p>
                <div class="button">
                    <button class="left_button">青海湖</button>
                    <button class="zhong_button">上海</button>
                    <button class="right_button">成都</button>
                </div>
            </div>
        </div>
        <div class="recommend_list col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <img src="../images/classification/5.jpg" alt="">
            <div>
                <h2>3~4推荐</h2>
                <p class="tiaozheng">一个家庭的合谐对孩子的成长能起到很大的帮助。一家人多外出游玩不仅增加孩子的家庭观，孩子会从中学会如何爱家人。长大后他懂得如何调解家中矛盾。
                </p>
                <div class="button">
                    <button class="left_button">厦门</button>
                    <button>西安</button>
                    <button class="right_button">111</button>
                </div>
            </div>
        </div>
        <div class="recommend_list col-xs-12 col-sm-6 col-md-4 col-lg-4 xiugai">
            <img src="../images/classification/6.jpg" alt="">
            <div>
                <h2>多人推荐</h2>
                <p class="tiaozheng">个人出游在购物、用餐、租车和旅途中由于人生地不熟，常被人欺诈；参加旅行社有严格的制度和保证，所以不会出现此类现象。
                    <br>
                </p>
                <div class="button">
                    <button class="left_button">九寨沟</button>
                    <button>西湖</button>
                    <button class="right_button">园林古镇</button>
                </div>
            </div>
        </div>
    </div>
    <div class="container box1 bottom">
        <div class="strip"></div>
    </div>
    <div class="container fixclear donghuajianju">
        <div class="halasou fixclear">
            <div class="donghua">
               <p>如果推荐的不到位，点击动图操作我们组长，左边技能，右边普通攻击,嘻嘻***不要松手哦</p>
                <div class="donghua3"><img src="../images/classification/2.gif" alt=""></div>
                <div class="donghua1"><img src="../images/classification/timg.gif" alt=""></div>
                <div class="donghua2"><img src="../images/classification/haha.gif" alt=""></div>
            </div>
          <div class="wtf"><img src="../images/classification/qqduihui.jpg" alt=""></div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="footer_btn col-xs-12 margin-bottom">
                    <ul class="col-xs-12 padding-t-10">
                        <li class="col-xs-3"><a href="../index.html"> 首页 </a></li>
                        <li class="col-xs-3"><a href="../page/location.html"> 旅游城市 </a></li>
                        <li class="col-xs-3"><a href="../page/classification.html"> 各色美景 </a></li>
                        <li class="col-xs-3"><a href="../page/card.html"> 打卡胜地 </a></li>
                    </ul>
                </div>
                <div class="cont">    
                    <div class="col-sm-4">
                        <img src="../images/header/logo.png" alt="">
                        <h4>你说的都队</h4>
                    </div>
                    <div class="col-sm-4" style="font-size: 10px;">
                        <p>扫码关注官方微信公众号</p>
                        <p>带你感受中国的美</p>
                        <img src="../images/header/code.jpg" alt="" style="width: 20%;height: 20%;padding: 5px;background-color: white;">
                    </div>
                    <div class="col-sm-4" style="font-size: 30px;">
                        <p class="fa fa-home"><span style="font-size: 12px;">&nbsp&nbsp成都市xxx区xxx广场xxx号楼</span></p>
                        <p class="fa fa-envelope-o"><span style="font-size: 12px;">&nbsp&nbsp0000000000@qq.com</span></p>
                        <p class="fa fa-phone"><span style="font-size: 12px;">&nbsp&nbsp888-888-888</span></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>